<script setup lang="ts">
import { customerApprovalRecordsApi } from '@/api/customer'
import { orderOperationLogApi } from '@/api/order'

const {
  source, // 来源
  orderId, //订单id
  customerId // 客户id
} = defineProps({
  source: {
    type: String,
    default: ''
  },
  orderId: {
    type: Number,
    default: 0
  },
  customerId: {
    type: Number,
    default: 0
  }
})
// 定义 dataList 变量
const dataList = ref<any[]>([])
const getData = async () => {
  try {
    let res: IResponse<any>
    switch (true) {
      case source === 'customer':
        res = await customerApprovalRecordsApi({
          id: customerId
        })
        dataList.value = res.data.list
        break

      case ['order', 'wholesal'].includes(source):
        res = await orderOperationLogApi({
          order_id: orderId,
          order_type: source
        })
        dataList.value = res.data.list
        break

      default:
        dataList.value = []
        break
    }
  } catch (e) {}
}

getData()
</script>

<template>
  <el-timeline class="timeline" v-if="dataList.length">
    <el-timeline-item class="w-100%" v-for="(group, index) in dataList" :key="index" type="primary">
      <template #default>
        <div class="timeline-group">
          <div class="timeline-date">
            <el-button type="text">
              {{ group.operate }}
            </el-button>
          </div>
          <div>
            <el-card shadow="always" class="record-card">
              <div class="card-body operate">
                <div>
                  <div>
                    <span class="operate-name mr-8px">{{ group.content }}</span>
                  </div>
                  <div class="mt-6px">
                    <span class="mr-8px">{{ group.user_name }}</span>
                    <span class="mr-8px">{{ group.create_time }}</span>
                  </div>
                  <div class="mt-6px" v-if="group.order_type || group.order_no">
                    <span v-if="group.order_type" class="mr-8px">{{ group.order_type }}</span>
                    <span v-if="group.order_no" class="mr-8px">{{ group.order_no }}</span>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </template>
    </el-timeline-item>
  </el-timeline>
  <!-- 暂无数据显示 -->
  <el-empty v-else :image-size="100" description="暂无数据" />
</template>
<style scoped>
.timeline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 20px;
}

.timeline-group {
  display: flex;
  flex-direction: column;
}

.timeline-date {
  margin-top: -5px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.operate-name {
  font-weight: bold; /* 加粗 */
  color: #000; /* 黑色字体 */
}

.operate {
  color: #999; /* 灰色字体 */
}
</style>
